<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>新增拍卖商品</title>
  <link href="css/common.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrap">
  <!-- main begin-->
  <div class="sale">
    <h1 class="lf">在线拍卖系统</h1>
    <div class="logout right"><a href="#" title="注销">注销</a></div>
  </div>
  <div class="login logns produce">
    <h1 class="blues">拍卖品信息</h1>
    <form action="${pageContext.request.contextPath}/do/addAuction" method="post" enctype="multipart/form-data" id="auctionForm" onsubmit="return validateForm()">
      <dl>
        <dd>
          <label>名称：</label>
          <input type="text" class="inputh lf" value="" name="auctionName" id="auctionName" required/>
          <div class="xzkbg spbg lf"></div>
          <span id="nameError" class="lf red laba"></span>
        </dd>
        <dd>
          <label>起拍价：</label>
          <input type="text" class="inputh lf" value="" name="auctionStartPrice" id="auctionStartPrice" required/>
          <span id="priceError" class="lf red laba">必须为数字</span>
        </dd>
        <dd>
          <label>底价：</label>
          <input type="text" class="inputh lf" value="" name="auctionUpset" id="auctionUpset" required/>
          <span id="upsetError" class="lf red laba">必须为数字</span>
        </dd>
        <dd>
          <label>开始时间：</label>
          <input type="datetime-local" class="inputh lf" name="auctionStartTime" id="auctionStartTime"
                 placeholder="yyyy-MM-dd HH:mm"
                 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}" required/>
          <span id="startTimeError" class="lf red laba">格式：2025-10-20 14:30</span>
        </dd>
        <dd>
          <label>结束时间：</label>
          <input type="datetime-local" class="inputh lf" name="auctionEndTime" id="auctionEndTime"
                 placeholder="yyyy-MM-dd HH:mm"
                 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}" required/>
          <span id="endTimeError" class="lf red laba">格式：2025-10-21 18:00</span>
        </dd>
        <dd class="dds">
          <label>拍卖品图片：</label>
          <div class="lf salebd"><a href="#"><img id="previewImage" src="images/ad20.jpg" width="100" height="100" /></a></div>
          <input name="auctionPic" type="file" class="offset10 lf" accept="image/*" onchange="previewFile(this)" id="auctionPic" required/>
          <span id="picError" class="lf red laba"></span>
        </dd>
        <dd class="dds">
          <label>描述：</label>
          <textarea name="auctionDesc" cols="" rows="" class="textarea" id="auctionDesc" required></textarea>
          <span id="descError" class="lf red laba"></span>
        </dd>
        <dd class="hegas">
          <input name="" type="submit" value="保 存" class="spbg buttombg buttombgs buttomb f14 lf" />
          <input name="" type="button" value="取 消" onclick="location.href='auction_management.jsp'" class="spbg buttombg buttombgs buttomb f14 lf" />
        </dd>
      </dl>
    </form>
  </div>
  <!-- main end-->
  <!-- footer begin-->

</div>
<!--footer end-->

</div>
</body>
<!-- 添加JavaScript实现图片预览和表单验证 -->
<script>
  function previewFile(input) {
    const preview = document.getElementById('previewImage');
    const file = input.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
      preview.src = e.target.result;
    }

    if (file) {
      reader.readAsDataURL(file);
    }
  }

  function validateForm() {
    // 重置错误信息
    document.querySelectorAll('.laba').forEach(el => el.style.display = 'none');

    let isValid = true;

    // 验证名称
    const name = document.getElementById('auctionName').value.trim();
    if (name === '') {
      document.getElementById('nameError').textContent = '名称不能为空';
      document.getElementById('nameError').style.display = 'inline';
      isValid = false;
    }

    // 验证起拍价
    const startPrice = document.getElementById('auctionStartPrice').value;
    if (startPrice === '' || isNaN(startPrice)) {
      document.getElementById('priceError').textContent = '起拍价必须为数字';
      document.getElementById('priceError').style.display = 'inline';
      isValid = false;
    }

    // 验证底价
    const upsetPrice = document.getElementById('auctionUpset').value;
    if (upsetPrice === '' || isNaN(upsetPrice)) {
      document.getElementById('upsetError').textContent = '底价必须为数字';
      document.getElementById('upsetError').style.display = 'inline';
      isValid = false;
    }

    // 验证开始时间
    const startTime = document.getElementById('auctionStartTime').value;
    if (startTime === '') {
      document.getElementById('startTimeError').textContent = '开始时间不能为空';
      document.getElementById('startTimeError').style.display = 'inline';
      isValid = false;
    }

    // 验证结束时间
    const endTime = document.getElementById('auctionEndTime').value;
    if (endTime === '') {
      document.getElementById('endTimeError').textContent = '结束时间不能为空';
      document.getElementById('endTimeError').style.display = 'inline';
      isValid = false;
    }

    // 验证图片
    const pic = document.getElementById('auctionPic').files[0];
    if (!pic) {
      document.getElementById('picError').textContent = '请上传拍卖品图片';
      document.getElementById('picError').style.display = 'inline';
      isValid = false;
    }

    // 验证描述
    const desc = document.getElementById('auctionDesc').value.trim();
    if (desc === '') {
      document.getElementById('descError').textContent = '描述不能为空';
      document.getElementById('descError').style.display = 'inline';
      isValid = false;
    }

    return isValid;
  }
</script>
</html>